<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Number Facts</title>

	<style type="text/css">
		*{
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		body{
			background-color: rgb(28,27,34);
			color: white;
			min-height: 100vh;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		section{
			width: 100%
		}
		.container{
			width: 90%;
			max-width: 450px;
			margin: 0 auto;
		}
		form, .number-fact{
			width: 100%;
			background-color: rgb(42,41,42);
			padding: 20px;
			border-radius: 8px;
		}
		input[type="number"]{
			width: 70%;
			height: 40px;
			border-radius: 4px;
			outline: none;
			border: none;
			background-color: #3a3a3b;
			font-size: 24px;
			color: aliceblue;
			padding-left: 10px;
		}
		input[type="number"]::placeholder{
			font-size: 24px;
			font-weight: 400;
		}
		button{
			display: inline-block;
			width: 25%;
			font-size: 24px;
			height: 40px;
			background-color: #3a3a3b;
			border: none;
			outline:none;
			border-radius: 4px;
			margin-left: 10px;
			cursor: pointer;
			color: aliceblue;
		}
		.number-fact{
			margin-top: 10px;
			height: auto;
			font-size: 20px;
		}
	</style>
</head>
<body>
	<section>
		<div class="container">
			<form>
				<input type="number" placeholder="Enter a number">
				<button type="submit">Submit</button>
			</form>
			<div class="number-fact">Give a number and i will tell you a interesting fact about it.</div>
		</div>
	</section>


	<script type="text/javascript">
		const form = document.querySelector('form');
		const factDiv = document.querySelector('.number-fact');

		form.addEventListener('submit', (e)=>{
			e.preventDefault();
			const number = e.target.querySelector('input[type="number"]').value;
			const loadText = 'Wait a little bit..';
			factDiv.innerHTML = loadText;
			const baseURL = 'http://numbersapi.com/';
			fetch(baseURL + number)
			.then(response => response.text())
			.then(text => factDiv.innerHTML = text);
		})
	</script>
</body>
</html>